<template>
  <button class="df-relative" :type="type" :style="action.buttonStyle" :class="[schema.commonButtonClass, action.buttonClass]" @click.prevent="clickHandler">
    {{label}}
    <div class="df-button-loading" v-if="action.pending">
      <div></div>
      <i class="fa fa-spinner fa-pulse fa-fw"></i>
    </div>
  </button>
</template>

<script>
  import _ from 'lodash'

  export default {
    props: {
      schema: {
        type: Object,
        default () {
          return {}
        }
      },
      action: {
        type: Object,
        required: true
      },
      locale: {
        type: Object,
        required: true
      }
    },
    computed: {
      type () {
        if (_.isNil(this.action.type)) {
          return 'button'
        }
        switch (this.action.type) {
          case 'submit':
          case 'reset':
          case 'button':
            return this.action.type
        }
        throw new Error('action type error...')
      },
      label () {
        return this.action.label || this.locale[this.action.type]
      }
    },
    methods: {
      clickHandler () {
        this.$emit('action', this.action)
        return false
      }
    }
  }
</script>
